<template>
  <div class="app-container">
    <!-- :span='24' 一行默认是24 -->
    <!-- <el-card>
      <el-row>

        <el-col :span="20" style="background:green">1</el-col>

        <el-col :span="2" style="background:pink">2</el-col>

        <el-col :span="2" style="background:skyblue">3</el-col>

      </el-row> -->
    <!-- </el-card> -->
    <!-- ----------------------------------------- -->

    <el-card class="tree-card">
      <!-- 用了一个行列布局 -->
      <el-row
        type="flex"
        justify="space-between"
        align="middle"
        style="height: 40px"
      >
        <el-col :span="20">
          <span>江苏传智播客教育科技股份有限公司</span>
        </el-col>
        <el-col :span="4">
          <el-row type="flex">
            <!-- 两个内容 -->
            <el-col :span="12">负责人</el-col>
            <el-col :span="12">
              <!-- 下拉菜单 element -->
              <el-dropdown>
                <span> 操作<i class="el-icon-arrow-down" /> </span>
                <!-- 下拉菜单 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
    <!-- ----------------------- -->
    <TreeTools :node-data="company" :root="true" />

    <el-tree :data="departs" :props="defaultProps" default-expand-all>
      <!-- node data是el-tree内部插槽提供出来的数据 -->
      <!-- node是偏底层一点的节点信息 -->
      <!-- data是我们之前自己写的数据 -->
      <template #default="{ data }">
        <!-- <p>{{ data.name }} - {{ data.manager }}</p> -->
        <TreeTools :node-data="data" />
      </template>
    </el-tree>
  </div>
</template>

<script>
import TreeTools from './components/TreeTools.vue'
export default {
  name: 'Departments',

  components: {
    TreeTools
  },
  data() {
    return {
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ],
      company: { name: '江苏传智播客教育科技股份有限公司', manager: '负责人' }
    }
  }
}

// export default {
//   name: 'Departmens',
//   data() {
//     return {
//       list: [
//         {
//           name: '传智播客',
//           child: [
//             {
//               name: '校区',
//               child: [{ name: '上海' }]
//             },
//             {
//               name: '最新招生计划'

//             },
//             {
//               name: '薪资水平'

//             }

//           ]
//         },
//         {
//           name: '2022招生'

//         },
//         {
//           name: '2021招生'

//         }
//       ],

//       defaultProps: {
//         label: 'name',
//         children: 'child'
//       }

//     }
//   }
// }
</script>

<style scoped>
.tree-card {
  padding: 30px 30px;
  font-size:14px;
}
</style>
